<template>
    <div class="app-container">
        <!-- 查询区域 -->
        <div class="table-search">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input style="width: 200px;" v-model="queryForm.name" placeholder="请输入名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="querySubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 操作 -->
            <div class=" ">
                <el-button :loading="loadingRefresh" @click="onRefresh" color="#40485b" type="info">刷新</el-button>
                <el-button @click="onAdd" type="primary">添加</el-button>
            </div>
            <!-- 列表 -->
            <el-table v-loading="loading" class="mt15 w100" :data="dataList" border>
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column prop="id" label="ID" width="60" align="center" />
                <el-table-column prop="name" label="网站名" width="160" />
                <!-- <el-table-column prop="update_by" label="上传人" width="90" align="center" /> -->
                <el-table-column prop="url" label="链接" show-overflow-tooltip />
                <el-table-column prop="m_url" label="移动端链接" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button @click="onEdit(scope.row)" type="primary">编辑</el-button>
                        <el-popconfirm width="220" confirm-button-text="删除" cancel-button-text="取消" icon-color="#626AEF"
                            title="是否确认删除?" @confirm="onDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div v-if="total > 0" class="table-pagination">
                <el-pagination background layout="sizes,total, ->, prev, pager, next, jumper"
                    :currentPage="queryForm.pageNum" :page-size="queryForm.pageSize" :total="total"
                    @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
            </div>
        </div>
        <!-- 表单 -->
        <popupForm ref="popupFormRef" @update="onRefresh" />
        <!--  -->
    </div>
</template>

<script setup>
import popupForm from './popupForm.vue';
import { ref, reactive, defineExpose, toRaw, inject } from 'vue'
import { getFriendLinkList, delFriendLink } from '@/api/friendlink';
import { useRouter } from 'vue-router'
const router = useRouter()
defineOptions({
    name: 'Friendlink/index',
})
const used = inject('used');// 获取常用方法

const querySubmit = () => {
    queryForm.pageNum = 1;
    getDataList();//初始化获取列表数据
}

let id = ref([]);//多选id
let loadingRefresh = ref(false);//筛选按钮状态
// 刷新按钮
const onRefresh = () => {
    loadingRefresh.value = true;
    getDataList();//初始化获取列表数据
}

let popupFormRef = ref(null);//弹窗组件

//新增
const onAdd = () => {
    popupFormRef.value.show()
}
// 编辑按钮
const onEdit = (row) => {
    popupFormRef.value.show(row)
}
/* 删除按钮 - 单个 */
const onDelete = (row) => {
    let params = { id: row.id }
    delSubmit(params);
}
//删除提交
const delSubmit = (params) => {
    delFriendLink(params).then(res => {
        if (res.code == 1) {
            used.msgSuccess(res.message)
            getDataList();//初始化获取列表数据
        } else {
            used.msgError(res.message)
        }
    })
}

/*获取列表数据 */
let dataList = ref([]);
let loading = ref(false);
let queryForm = reactive({
    name: '',
    pageNum: 1,
    pageSize: 10,
});
let total = ref(0);
getDataList();//初始化获取列表数据

// 获取列表数据
function getDataList() {
    loading.value = true;
    getFriendLinkList(queryForm).then(res => {
        if (res.code == 1) {
            dataList.value = res.data.rows;
            total.value = res.data.total;
        }
        loading.value = false;
        //刷新按钮状态
        if (loadingRefresh.value) {
            loadingRefresh.value = false;
        }
    })
}
const onTableSizeChange = (val) => {
    queryForm.pageSize = val;
    getDataList()
}
const onTableCurrentChange = (val) => {
    queryForm.pageNum = val;
    getDataList()
}

defineExpose({
    loading
})
</script>

<style scoped lang="scss"></style>
